<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="preload"
      href="//at.alicdn.com/t/font_3347208_g4dxcn4zre.woff2"
      as="font"
      type="font/woff2"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_3347208_awunk94nflk.css"
    />
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/item.css" />
    <script src="../js/jquery.min.js"></script>
  </head>
  <body>
    <!-- 头部开始 -->
    <div class="header">
      <div class="warp">
        <ul class="header-left">
          <li><a href="#">小米商城</a><span>|</span></li>
          <li><a href="#">MIUI</a><span>|</span></li>
          <li><a href="#">loT</a><span>|</span></li>
          <li><a href="#">云服务</a><span>|</span></li>
          <li><a href="#">天星数科</a><span>|</span></li>
          <li><a href="#">有品</a><span>|</span></li>
          <li><a href="#">小爱开放平台</a><span>|</span></li>
          <li><a href="#">企业团购</a><span>|</span></li>
          <li><a href="#">资质证照</a><span>|</span></li>
          <li><a href="#">协议规则</a><span>|</span></li>
          <li class="app">
            <a href="#">下载app</a><span>|</span>
            <div class="download">
              <a href="">
                <img src="../images/wx-img.png" alt="" />
                <p>小米商城APP</p>
              </a>
            </div>
            <div class="triangle"></div>
          </li>
          <li><a href="#">Select Location</a></li>
        </ul>
        <ul class="header-right">
          <li><a href="../html/02-login.html">登录</a><span>|</span></li>
          <li><a href="../html/01-register.html">注册</a><span>|</span></li>
          <li><a href="#">消息通知</a></li>
          <li class="cart">
            <a href="../html/05-cart.html"
              ><i class="iconfont icon-gouwuchekong"></i> 购物车(0)</a
            >
            <div class="cart-list">购物车中还没有商品，赶紧选购吧！</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 第二部分 -->
    <div class="nav">
      <div class="warp">
        <div class="logo">
          <a href="#"><img src="../images/logo-mi2.png" alt="" /></a>
        </div>
        <div class="nav-bar">
          <ul>
            <li>
              <a href="#">Xiaomi手机</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img
                            src="../images/88ae9b85c5f8fbdae2ea98d58a045e1e.jpg"
                            alt=""
                          />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/02.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/03.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/04.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/05.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/06.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">Redmi红米</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/q1.jpg" alt="" />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/q2.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/q3.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/q4.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/q5.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/q6.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">电视</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/d1.jpg" alt="" />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/d2.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/d3.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/d4.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/d5.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/d6.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">笔记本</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/j2.jpg" alt="" />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/j1.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/j3.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/j4.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/j5.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/j6.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">平板</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/p1.jpg" alt="" />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/p2.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/p3.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/04.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/05.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/06.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">家电</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/s1.jpg" alt="" />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/s2.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/s3.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/s4.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/s5.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/06.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li>
              <a href="#">路由器</a>
              <div class="nav-bar-list">
                <div class="warp">
                  <ul>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/l1.jpg" alt="" />
                          <p>Xiaomi Civi 1S</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/l2.jpg" alt="" />
                          <p>Xiaomi 12 Pro</p>
                          <p>4699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/l3.jpg" alt="" />
                          <p>Xiaomi 12</p>
                          <p>3699元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/l4.jpg" alt="" />
                          <p>Xiaomi 12X</p>
                          <p>2999元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/l5.jpg" alt="" />
                          <p>Xiaomi 11 青春活力版</p>
                          <p>1899元起</p>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        <div class="nav-img-box">
                          <img src="../images/l6.jpg" alt="" />
                          <p>Xiaomi Civi</p>
                          <p>2299元起</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
          </ul>
        </div>
        <div class="search">
          <input type="text" placeholder="小米12" id="bord" onclick="ber()" />
          <button
            class="iconfont icon-fangdajing"
            id="shousuo"
            type="button"
          ></button>
        </div>
      </div>
    </div>
    <!-- 第三部分 顶部导航栏 -->
    <div class="nav-bar-dhl">
      <div class="warp">
        <div class="name">

        </div>
        <div class="cansu">
            <ul>
                <li><a href="#">概述页</a><span>|</span></li>
                <li><a href="#">参数页</a><span>|</span></li>
                <li><a href="#">F码通道</a><span>|</span></li>
                <li><a href="#">资讯客服</a><span>|</span></li>
                <li><a href="#">用户评价</a></li>
            </ul>
        </div>
      </div>
    </div>

    <!-- 手机详情 -->
    <div class="nav-bar-dhl1">
      <div class="sjzp">
        
        </div>
      </div>
    </div>
    <script src="../js/item.js"></script>
  </body>
</html>
